// 首面
<template>
    <div class="whole" style="width:100%;height:100%;">
        <!-- {{this.$route}} -->
        <!-- {{page_title}} -->
        <!-- {{this.treeList}} -->
        <!-- {{search_title_show}} -->
        <!-- {{breadcrumbList}} -->
        <!-- {{activeIndex}} -->
        <!-- {{who_i}} -->
        <el-container style="height: 100%;">
            <!-- <div style="width:10px;height:10px;background-color:red" @click="test"></div> -->
            <el-aside style="width:250px;display:flex;flex-direction:column;">
                <div style="flex:0 0 5%;display:flex;align-items:center;justify-content:center">
                    <i class="iconfont ali-logolvsebiaozhi" style="font-size:40px;"></i>
                    <div style="font-size:25px">三峡水库管理系统</div>
                </div>
                    <el-menu :default-active="this.activeIndex" class="el-menu-vertical-demo" :router="true" @select="handleSelect" :default-openeds="defaultOpeneds">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>系统概要</span>
                            </template>
                            <el-menu-item index="/index/home/overview">
                                <i class="iconfont ali-globe_"></i>
                                <span class="side_font">样本总览</span>
                            </el-menu-item>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span slot="title">地质专题</span>
                            </template>
                            <el-menu-item index="/index/geology/geologywk">
                                <i class="iconfont ali-dizhiti"></i>
                                <span class="side_font">地质调查点</span>
                            </el-menu-item>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span slot="title">土壤专题</span>
                            </template>
                            <el-menu-item index="/index/soil/soilwk">
                                <i class="iconfont ali-turangleixing"></i>
                                <span class="side_font">土壤调查点</span>
                            </el-menu-item>
                            <el-menu-item index="/index/soil/analyse">
                                <i class="iconfont ali-turangdanhanliang"></i>
                                <span class="side_font">土壤类型</span>
                            </el-menu-item>
                        </el-submenu>
                        <el-submenu index="4">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span class="side-font">生物专题</span>
                            </template>
                            <el-menu-item index="/index/zoology/zoologywk">
                            <!-- <el-menu-item index="/index/soil/analyse"> -->
                                <i class="iconfont ali-weishengwuweishengwujianyan"></i>
                                <span class="side_font">生物分布密度</span>
                            </el-menu-item>
                        </el-submenu>
                        <el-submenu index="5">
                            <template slot="title">
                                <i class="el-icon-setting"></i>
                                <span class="side-font">用户管理</span>
                            </template>
                            <el-menu-item index="/index/user/total">
                                <i class="iconfont ali-quanxianshenpi"></i>
                                <span class="side_font">个人信息</span>
                            </el-menu-item>
                            <el-menu-item index="/index/user/userApply" v-if="this.who_i.power=='admin'">
                                <i class="iconfont ali-shenqingquanxian"></i>
                                <span class="side_font">申请处理</span>
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
            </el-aside>
            <el-container>
                <el-header style=";height:7%;display:flex;flex-direction:column;">
                    <div style=";flex:0 0 50%;display:flex;margin-top:8px;">
                        <div class="header1" style="flex:0 0 2%;" @click="fullScreen">
                            <i v-if="sf_picture==1" class="iconfont ali-quanping"></i>
                            <i v-if="sf_picture==2" class="iconfont ali-suoxiao"></i>
                        </div> 
                        <div class="header1" style="flex:0 0 2%"><i class="iconfont ali-shuaxin"></i></div> 
                        <div class="header1" style="padding:0 5px 0 5px">
                            <el-breadcrumb separator-class="el-icon-arrow-right">
                                <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
                                    <router-link :to="{path:item.path}">{{item.title}}</router-link>
                                </el-breadcrumb-item>
                            </el-breadcrumb>
                        </div> 
                        <div class="header1" style="flex:1"></div> 
                        <div class="header1" style="padding:0 5px 0 0">
                            欢迎回来，  <span style="color:blue">{{this.who_i.name}}</span>
                        </div> 
                        <div class="header1" style="flex:0 0 2%">
                            <router-link to="/index/user/total">
                                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                            </router-link>
                        </div> 
                    </div>
                    <div></div>
                </el-header>
                <el-main style="background-color:#f1f3f6;padding:20px;position:relative;">
                    <el-tooltip placement="bottom" content="快速定位">
                        <div v-show="regionShow" class="regionButton"  @click="zoomAlign=zoomAlign?false:true">
                            <i class="el-icon-d-arrow-right" style="font-size:40px;"></i>
                        </div>
                    </el-tooltip>
                    <div style="background-color:#f1f3f6;position:absolute;width:380px;padding:5px;z-index:10;top:15%;left:3%" v-if="zoomAlign">

                        <div class="tree-container" style="height:690px">
                            <el-tree
                            ref="treeRef"
                            :node-key="'id'"
                            :data="treeList"
                            :props="defaultProps"
                            :default-expand-all="true"
                            @node-click="handleNodeClick"
                            >
                            <span slot-scope="{ data }">
                                <!-- {{data.hasOwnProperty('children')}} -->
                                <div v-if="data.hasOwnProperty('children')" style="display: flex; align-items: center; margin-left: 0px;">
                                    <img src="@/assets/folder.png" alt="Icon" style="width:35px">
                                    <span style="padding-left:10px">{{data.label }}</span>
                                </div>
                                <div v-else style="display: flex; align-items: center; margin-left: 0px;">
                                    <img src="@/assets/earth.png" alt="Icon" style="width:25px; padding-left:2px">
                                    <span style="padding-left:10px">{{data.label }}</span>
                                </div>
                            </span>
                            </el-tree>
                        </div>
                    </div>
                    <router-view style="height:100%;width:100%;" ref="child"> </router-view>
                </el-main>
                <!-- <el-footer style=";display:flex;justify-content:center;" v-if="this.$route.path=='/index/user/userApply'">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :current-page="this.pageData.current_page"
                        :page-size="this.pageData.page_size"
                        :total="this.pageData.total">
                    </el-pagination>
                </el-footer> -->
            </el-container>
        </el-container>
    </div>
</template>

<script>
import {treeList} from '@/assets/common'
import Axios from '@/my_axios'

export default {
    name: 'indexVue',
    mounted() {
        const tmp = this.$route.path.toString().split('/');
        this.page_title = tmp.slice(1,tmp.length);
        this.get_i();
        this.activeIndex = this.$route.path;
        this.getBreadcrumb();

        if(["geology", "home", "soil", "zoology"].includes(this.page_title[1])){
            this.regionShow = true;
        } else {
            this.regionShow = false;
        }
    },
    data() {
        return {
            breadcrumbList:[],


            //test
            tmp:false,

            //fullscreen
            sf_picture:1,

            zoomAlign:false,
            regionShow:false,

            // title
            page_title: [],//默认为首页专题
            activeIndex: this.$route.fullpath,

            // style
            header1box_clicked: {},
            header2box_clicked: {},

            // 身份
            who_i:{},
            
            // 树列表
            treeList: [treeList],
            defaultOpeneds:['1', '2', '3', '4', '5'],//左侧导航栏默认张开项
        
            // 对象关系映射
            defaultProps: {
                label: 'label',
                children: 'children',
            },

            //search_title
            search_title_show:false,
            search_title_options:{
                county:[],
                title:[
                    {
                        label:'地质专题',
                        value:'dz',
                    },
                    {
                        label:'土壤专题',
                        value:'tr',
                    },
                    {
                        label:'生物专题',
                        value:'zoology',
                    }
                ],
                time:[
                    {
                        label: '2021/04',
                        value: '2021/04',
                    },
                    {
                        label: '2021/08',
                        value: '2021/08',
                    },
                    {
                        label: '2022/04',
                        value: '2022/04',
                    },
                    {
                        label: '2022/06',
                        value: '2022/06',
                    },
                    {
                        label: '2022/08',
                        value: '2022/08',
                    },
                ],
            },//选项数据
            search_title_req:{},//request数据
            search_title_resp:[],//resp处理数据
        }
    },
    watch: {
        '$route'(to) { 
            this.activeIndex = to.path;
            this.getBreadcrumb();
            
            const tmp = to.path.toString().split('/');
            this.page_title = tmp.slice(1, tmp.length);

            if(["geology", "home", "soil", "zoology"].includes(this.page_title[1])){
                this.regionShow = true;
            } else {
                this.regionShow = false;
            }
        }
    },
    computed: {
    },
    methods: {
        test(){

        },

        getBreadcrumb(){
            // console.log('yes')
            // 获取当前路由信息
            const matched = this.$route.matched
            // 初始化面包屑导航数据
            const breadcrumbList = []
            // 遍历路由信息，生成面包屑导航数据
            matched.forEach(item => {
                // console.log(item)
                if(item.name != "index"){
                    breadcrumbList.push({"title":item.meta.title, "path":item.path})
                }
            })
            // 保存面包屑导航数据
            this.breadcrumbList = breadcrumbList

        },


        fullScreen(){
            function isFullScreen() {
                return (
                    document.fullscreenElement ||
                    document.mozFullScreenElement ||
                    document.webkitFullscreenElement ||
                    document.msFullscreenElement
                );
            }
            // alert(isFullScreen())

            // 适配主流的各种浏览器
            function launchFullScreen(element) {
                if(element.requestFullscreen) {
                    element.requestFullscreen();
                } else if(element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if(element.webkitRequestFullscreen) {
                    element.webkitRequestFullscreen();
                } else if(element.msRequestFullscreen) {
                    element.msRequestFullscreen();
                }
            }

            function exitFullScreen() {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.mozCancelFullScreen) { // Firefox
                    document.mozCancelFullScreen();
                } else if (document.webkitExitFullscreen) { // Chrome, Safari, Opera
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) { // IE/Edge
                    document.msExitFullscreen();
                }
            }

            setTimeout(() => {
                if(!isFullScreen()){
                    launchFullScreen(document.documentElement); // 整个网页
                    this.sf_picture = 2;
                }else {
                    exitFullScreen();
                    this.sf_picture = 1;
                }
            }, 100);

        },

        handleSelect(index){
            this.activeIndex = index;
        },

        get_i(){
            Axios.post('/who_i').then((resp)=> {
                this.who_i = resp.data.data
                // console.log("*****", this.who_i)
            })
        },
        handleNodeClick(data) {
            if(this.$route.path!='user'){
                this.$refs.child.navi_click(data) // user页面该功能失效
            }
        },
        search_title_open() {
            this.search_title_show = true;

            this.header2box_clicked.backgroundColor = 'white';//点击后，样式改变

            if(this.search_title_options.county.length==0)//避免二次打开时，重复添加 
                this.treeList[0].children.forEach((element)=> {
                    // console.log('element', element)
                    this.search_title_options.county.push(element);
                })
        },
        search_title_ok() {
            Axios.post('/search_WK', {
                search_WK_req:this.search_title_req
            }).then((resp)=> {
                // console.log('resp:', resp)
                this.search_title_resp = resp.data.data;
            })
        },
        search_title_reset() {
            this.search_title_req = {};
            this.search_title_resp = [];
        }
    },
}
</script>

<style lang='less' scoped>
.tree-container /deep/ .el-tree-node__content {
    display: flex ;
    align-items: center;
    height: 26px;
    cursor: pointer;
    height:35px;
    border-bottom: 1px solid grey;
    border-left: 1px solid grey;
}
// 设置树形组件节点的定位和左内边距
.tree-container /deep/ .el-tree-node {
    position: relative;
    padding-left: 0px;
}

// 设置树形组件节点的 before 伪类的样式
.tree-container /deep/ .el-tree-node:before {
    width: 1px;
    height: 100%;
    content: '';
    position: absolute;
    top: -38px;
    bottom: 0;
    left: 0;
    right: auto;
    border-width: 1px;
    border-left: 1px solid #b8b9bb;
}

// 设置树形组件节点的 after 伪类的样式
.tree-container /deep/ .el-tree-node:after {
    width: 13px;
    height: 13px;
    content: '';
    position: absolute;
    left: 0;
    right: auto;
    top: 12px;
    bottom: auto;
    border-width: 1px;
    border-top: 1px solid #b8b9bb;
}

// 设置树形组件首节点的左边框不显示
.tree-container /deep/ .el-tree > .el-tree-node:before {
    border-left: none;
}

// 设置树形组件首节点的顶部边框不显示
.tree-container /deep/ .el-tree > .el-tree-node:after {
    border-top: none;
}

// 设置树形组件末节点的 before 伪类的高度
.tree-container /deep/ .el-tree .el-tree-node:last-child:before {
    height: 50px;
}

// 设置树形组件节点字体大小、以及取消左内边距
.tree-container /deep/ .el-tree .el-tree-node__content {
    color: #000;
    font-size: 15px;
    font-weight: 400;
    padding-left: 0 !important;
}

// 设置树形组件孩子节点左内边距
.tree-container /deep/ .el-tree .el-tree-node__children {
    padding-left: 11.5px;
}

// 设置树形组件叶子节点的默认图标不显示
.tree-container /deep/ .el-tree .el-tree-node__expand-icon.is-leaf {
    display: none;
}


// 设置树形组件有叶子节点的左外边距
.tree-container /deep/ .el-tree .el-tree-node__content:has(.is-leaf){
// color: aqua;
    margin-left: 20px !important;
}

.search_title {
    width: 800px;
    height: 600px;
    background-color:white;
    position:absolute;
    top:5%;
    left:20%;
    border:3px solid #3498db;
    box-shadow: 5px 5px 10px rgba(0, 0, 0.5);
}

.search_title /deep/ .first_column {
    margin-top:5px;
}

.header1 {
    height:100%;
    align-content:center;
    text-align: center;
}

.side_font {
    // padding-left:5px;
    margin-left: 10px;
}

.el-menu {
    padding: 10px;
}

::v-deep .el-submenu__title{
    border-radius: 8px;
}

::v-deep .el-menu-item{
    border-radius: 8px;
}

::v-deep .el-menu-item.is-active {
  background-color: #d9e9fb !important; /* 背景色设置为蓝色 */
  color: #0474dd !important; /* 文字颜色设置为白色 */
}

/* 如果需要父级菜单项也变蓝 */
::v-deep .el-submenu.is-active .el-submenu__title {
  color: #0474dd !important; /* 文字颜色设置为白色 */
}

.regionButton {
    position:absolute;
    background-color:white;
    text-align:center;
    width:45px;
    height:45px;
    z-index:10;
    top:7%;
    left:3%;
}
.regionButton:hover {
    background-color: orange;
}
</style>
